<script setup lang="ts">
import { computed } from "vue";
import { Field, CellGroup, type FieldRule } from "vant";

interface PropsData {
  label?: string;
  modelValue?: number | string;
  name?: string;
  maxlength?: string | number;
  placeholder?: string;
  required?: boolean;
  rules?: FieldRule[];
}

const propsData = withDefaults(defineProps<PropsData>(), {
  maxlength: 300,
  placeholder: "请输入",
});
const emits = defineEmits(["update:modelValue"]);
const remarkVal = computed({
  get: () => propsData.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  },
});
</script>
<template>
  <cell-group inset>
    <field
      v-model="remarkVal"
      rows="2"
      autosize
      show-word-limit
      :label="propsData.label"
      :name="propsData.name"
      :placeholder="propsData.placeholder"
      :maxlength="propsData.maxlength"
      :required="propsData.required"
      :rules="propsData.rules"
    />
  </cell-group>
</template>

<style lang="scss" scoped>
:deep(.van-field) {
  display: flex;
  flex-direction: column;
  .van-field__label {
    // width: auto;
    color: #666666;
  }
}
</style>
<style lang="scss">
.van-cell-group--inset {
  margin: 0px;
}
</style>
